import {Text, View, ScrollView, Slot} from '@tarojs/components';
import React, {Component} from 'react';
import Taro, {getCurrentInstance} from '@tarojs/taro';
import {connect} from 'react-redux';
import './index.less';
import * as T from './types';
import actions from './actions';
import Tab from './components/tab';
import {store2Props} from './selectors';
import api from 'api';
import dayjs from 'dayjs';

actions().actions.loadReducer();
// @ts-ignore
@connect<Partial<T.IProps>, any>(store2Props, actions)
export default class Index extends Component<Partial<T.IProps>, any> {
  constructor(props) {
    super(props);
    this.state = {
      down: false,
    };
  }

  componentDidMount() {
    this.props.actions.init();
  }
  componentWillUnmount() {
    this.props.actions.clean();
  }
  componentDidShow(): void {}
  async _refresh() {
    const {
      actions: {action},
      main: {searchParams},
    } = this.props;
    let {down} = this.state;
    this.setState({
      down: true,
    });
    // down = true;
    if (down) return;
    action.commonChange('main.searchParams', {
      pageNum: 0,
      pageSize: 10,
      type: searchParams.type,
    });
    try {
      await action.page(true);
    } finally {
      this.setState({
        down: false,
      });
    }
  }
  nextPage() {
    const {
      actions: {action},
      main: {searchParams, status},
    } = this.props;
    if (status !== 'ready') return;
    const pageNum = searchParams.pageNum + 1;
    action.commonChange('main.searchParams.pageNum', pageNum);
    action.commonChange('main.status', 'loading');
    action.page();
  }

  render() {
    const {
      main: {list, checkTab},
    } = this.props;
    return (
      <View className="rechargeHistory">
        <Tab />
        <ScrollView
          style={`height: calc(100vh - ${checkTab === 'money' ? 216 : 120}rpx);`}
          refresher-enabled
          refresher-triggered={this.state.down}
          className="rechargeHistory-Scroll"
          scrollY
          refresher-background="#F7F6F6"
          onScrollToLower={() => this.nextPage()}
          onRefresherRefresh={() => this._refresh()}
        >
          {/* @ts-ignore */}
          <Slot name="refresher" style="width:100%;padding:24rpx 0;">
            <View style={{justifyContent: 'center', fontSize: '24rpx', alignItems: 'center'}}>加载中...</View>
          </Slot>
          {list.map((e) => (
            <View className="historyItem" key={e.id}>
              <View>
                <Text className="historyItem-title">{checkTab === 'box' ? e.goodsName : e.content}</Text>

                <Text className="historyItem-time">
                  {checkTab === 'box' ? '购买' : e.type == 1 ? '充值' : '使用'}时间：
                  {dayjs(checkTab === 'box' ? e.createTime : e.opTime).format('YYYY-MM-DD HH:mm:ss')}
                </Text>
              </View>
              {checkTab === 'box' && <Text className="historyItem-value-delete">￥{e.price}</Text>}
              {checkTab === 'money' && (
                <Text className={`historyItem-value-${e.type == 1 ? 'add' : 'delete'}`}>
                  {e.type == 1 ? '+' : '-'}
                  {e.magicCoin}
                </Text>
              )}
            </View>
          ))}
        </ScrollView>
      </View>
    );
  }
}
